@charset "utf-8";
@import "./var";
@import "./function";
@import "./mixin/color.scss";
.gs-badge {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer; //鼠标改变图标
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none; //选中边框
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 4px;
}
.gs-badge:hover {
    filter: alpha(Opacity=70);
    opacity: 0.7;
}
.gs-badge:active {
    transform: scaleX(1.1);
}
.gs-badge--disabled {
    filter: alpha(Opacity=20);
    opacity: 0.2;
}
.gs-badge--disabled:hover {
    cursor: default;
    filter: alpha(Opacity=20);
    opacity: 0.2;
}
.gs-badge--disabled:active {
    transform: scaleX(1);
}

/** 颜色*/
.gs-badge--info {
    @include bgc("info");
    @include fontcol("while");
}
.gs-badge--primary {
    @include bgc("primary");
    @include fontcol("while");
}
.gs-badge--success {
    @include bgc("success");
    @include fontcol("while");
}
.gs-badge--danger {
    @include bgc("danger");
    @include fontcol("while");
}
.gs-badge--warning {
    @include bgc("warning");
    @include fontcol("while");
}
.gs-badge--dark {
    @include bgc("dark");
    @include fontcol("while");
}
.gs-badge--round {
    @include bgc("round");
    @include fontcol("while");
}
.gs-badge--light {
    @each $light in (dark, primary, success, warning, danger, info, round, while) {
        &.gs-badge--#{$light} {
            background-color: rgba(selectorColor($light), 0.1);
            @include fontcol($light);
            @include border($light);
        }
    }
}

/** 大小 */
.gs-badge--mini {
    @include size("mini");
}
.gs-badge--small {
    @include size("small");
}
.gs-badge--big {
    @include size("big");
}
.gs-badge--circle {
    border-radius: 50%;
    &.gs-badge--mini {
        padding: 8px 8px;
    }
    &.gs-badge--small {
        padding: 16px 16px;
    }
    &.gs-badge--big {
        padding: 20px 20px;
    }
}
.gs-badge--msg {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    .gs-badge--msgdiv {
        position: absolute;
        top: 0;
        right: 10px;
        transform: translateY(-50%) translateX(100%);

        background-color: hsl(0, 87%, 69%);
        border-radius: 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        text-align: center;
        white-space: nowrap;
        border: 1px solid #fff;
    }
}

